<template>
  <div class="wft-app-generator">
    <ManagePanel :appId />
    <WorkBench @panelJson="getPanelJson" @onActivated="onActivated" @closeDialog="$emit('closeDialog')" />
    <ConfigPanel :panel-json="panelJson" :cur-comp="curComp" @initCurComp="curComp = undefined" />
    <Lock v-if="isLock" />
  </div>
</template>
<script setup lang='ts'>
import { ConfigPanel, ManagePanel, WorkBench } from './Layout'
import { defineAsyncComponent, onMounted, onUnmounted, ref } from 'vue'
import { BrowserEventEnum } from '@/enums'
import { useLock } from 'generator/hooks'

const isLock = useLock()

const Lock = defineAsyncComponent(() => import('generator/Lock/index.vue'))

withDefaults(defineProps<{
  appId?: string
}>(), {
  appId: ''
})

const panelJson = ref<TPanel>({
  id: '',
  name: '页面1',
  label: 'page1',
  isConflictCheck: false,
  isGlobal: true,
  auth: {
    open: false,
    key: ''
  },
  style: {
    width: 100,
    height: 100,
    background: {
      color: '#fff',
      img: '',
      size: '100% 100%',
      repeat: 'repeat',
      position: 'top left'
    }
  },
  children: [],
  data: [],
  hooks: []
})
const curComp = ref<TComp>()

onMounted(() => {
  window.addEventListener(BrowserEventEnum.ON_BEFORE_UNLOAD, browserBeforeUnload)
})

onUnmounted(() => {
  window.removeEventListener(BrowserEventEnum.ON_BEFORE_UNLOAD, browserBeforeUnload)
})

function getPanelJson (json: TPanel) {
  panelJson.value = json
}

function onActivated (comp: TComp | undefined) {
  curComp.value = comp
}

function browserBeforeUnload (e: BeforeUnloadEvent) {
  e.preventDefault()
}

</script>
<style scoped>
.wft-app-generator {
  width: 100%;
  height: 100%;
  display: flex;
}
</style>